<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>架构图工具</title>
    <script src="../js/html2canvas.min.js"></script>
    <link href="../css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --app-layer-color: #e6f7ff;
            --interface-layer-color: #f6ffed;
            --primary-color: #7550a9;
            --success-color: #52c41a;
            --text-color: #333;
            --border-color: #d9d9d9;
            --shadow-color: rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            color: var(--text-color);
            background-color: #f5f5f5;
        }
        
        .container {
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px var(--shadow-color);
            position: relative;
            margin-right: 100px;
        }
        
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            border: 1px solid #d9d9d9;
            padding: 10px;
            cursor: pointer;
        }
        
        .platform-title {
            font-size: 22px;
            font-weight: bold;
            color: var(--primary-color);
            margin: 0;
        }
        
        .fixed-controls {
            position: fixed;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 100;
        }
        
        button {
            padding: 10px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .export-btn {
            background-color: #7550a9;
            color: white;
        }
        
        .export-btn:hover {
            background-color: #667eea;
        }
        
        .add-layer-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .add-layer-btn:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        
        .layer-container {
            margin-bottom: 40px;
        }
        
        .layer {
            display: flex;
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            background: white;
            box-shadow: 0 2px 8px var(--shadow-color);
            position: relative;
        }
        
        .layer-title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fafafa;
            padding: 0 15px;
            min-width: 150px;
            border-right: 1px solid var(--border-color);
        }
        
        .modules {
            display: flex;
            flex-wrap: wrap;
            padding: 15px;
            flex-grow: 1;
            gap: 15px;
        }
        
        .module-group {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            min-width: 180px;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
        }
        
        .module-group:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--shadow-color);
        }
        
        .module-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 15px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            gap: 10px;
        }
        
        .module-title {
            font-weight: bold;
            margin: 0;
            font-size: 16px;
        }
        
        .module-actions {
            display: flex;
            gap: 5px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .module-group:hover .module-actions {
            opacity: 1;
        }
        
        .module-action {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 12px;
            color: #666;
            padding: 2px;
        }
        
        .module-action:hover {
            color: var(--primary-color);
        }
        
        .module-items {
            padding: 10px 0;
        }
        
        .module-item {
            padding: 8px 15px;
            margin: 5px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            transition: all 0.2s;
            position: relative;
            border: 1px solid #1890ff;
            text-align: center;
        }
        
        .module-item:hover {
            background-color: #f0f0f0;
        }
        
        .module-item-text {
            flex-grow: 1;
        }
        
        .module-item-remove {
            color: #ff4d4f;
            cursor: pointer;
            margin-left: 10px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .module-item:hover .module-item-remove {
            opacity: 1;
        }
        
        .app-layer .module-group {
            background-color: var(--app-layer-color);
            border-color: #bae7ff;
        }
        
        .app-layer .module-header {
            background-color: #d2eafb;
        }
        
        .interface-layer .module-group {
            background-color: var(--interface-layer-color);
            border-color: #d9f7be;
        }
        
        .interface-layer .module-header {
            background-color: #e2f4d4;
        }
        
        .layer-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 5px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .layer:hover .layer-actions {
            opacity: 1;
        }
        
        .layer-action {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .layer-action:hover {
            background: rgba(0, 0, 0, 0.7);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: modalFadeIn 0.3s;
        }
        
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            color: var(--primary-color);
            text-align: center;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group input{
            width: 95%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
        }

        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
        }
        
        .modal-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
        }
        
        .cancel-btn {
            background-color: #f5f5f5;
            color: var(--text-color);
            padding: 10px 20px;
        }
        
        .save-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 20px;
        }
        
        .save-btn:hover {
            background-color: #667eea;
        }
        
        .confirm-modal .modal-content {
            text-align: center;
        }
        
        .confirm-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="container" id="capture-area">
        <div class="header" id="platformHeader">
            <h1 class="platform-title" id="platformTitle">架构图</h1>
        </div>
        
        <div class="fixed-controls" id="controlsContainer">
            <button class="add-layer-btn" id="addLayerBtn"><i class="fa-solid fa-layer-group"></i> 添加新层</button>
            <button class="export-btn" id="exportBtn"><i class="fa-solid fa-file-export"></i> 导出图片</button>
        </div>
        
        <div class="layer-container">
            <div class="layer app-layer">
                <div class="layer-title-container">
                    <h2 class="layer-title">应用层</h2>
                </div>
                <div class="modules">
                    
                </div>
                <div class="layer-actions">
                    <button class="layer-action add-module"><i class="fa-solid fa-plus"></i></button>
                    <button class="layer-action remove-layer"><i class="fa-solid fa-xmark"></i></button>
                </div>
            </div>
            
            <div class="layer interface-layer">
                <div class="layer-title-container">
                    <h2 class="layer-title">接入层</h2>
                </div>
                <div class="modules">
                    
                </div>
                <div class="layer-actions">
                    <button class="layer-action add-module"><i class="fa-solid fa-plus"></i></button>
                    <button class="layer-action remove-layer"><i class="fa-solid fa-xmark"></i></button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal" id="addLayerModal">
        <div class="modal-content">
            <div class="modal-title">添加新层</div>
            <div class="form-group">
                <label for="layerName">层名称</label>
                <input type="text" id="layerName" placeholder="请输入层名称">
            </div>
            <div class="form-group">
                <label for="layerType">层类型</label>
                <select id="layerType">
                    <option value="app">应用层</option>
                    <option value="interface">接入层</option>
                    <option value="custom">自定义</option>
                </select>
            </div>
            <div class="modal-actions">
                <button class="cancel-btn" id="cancelAddLayer">取消</button>
                <button class="save-btn" id="saveLayer">确认</button>
            </div>
        </div>
    </div>
    
    <div class="modal" id="addModuleModal">
        <div class="modal-content">
            <div class="modal-title">添加新模块</div>
            <div class="form-group">
                <label for="moduleName">模块名称</label>
                <input type="text" id="moduleName" placeholder="请输入模块名称">
            </div>
            <div class="modal-actions">
                <button class="cancel-btn" id="cancelAddModule">取消</button>
                <button class="save-btn" id="saveModule">确认</button>
            </div>
        </div>
    </div>
    
    <div class="modal" id="addItemModal">
        <div class="modal-content">
            <div class="modal-title">添加新项</div>
            <div class="form-group">
                <label for="itemName">项名称</label>
                <input type="text" id="itemName" placeholder="请输入项名称">
            </div>
            <div class="modal-actions">
                <button class="cancel-btn" id="cancelAddItem">取消</button>
                <button class="save-btn" id="saveItem">确认</button>
            </div>
        </div>
    </div>
    
    <div class="modal" id="editTitleModal">
        <div class="modal-content">
            <div class="modal-title">修改架构图名称</div>
            <div class="form-group">
                <label for="newTitle">新名称</label>
                <input type="text" id="newTitle" placeholder="请输入架构图名称">
            </div>
            <div class="modal-actions">
                <button class="cancel-btn" id="cancelEditTitle">取消</button>
                <button class="save-btn" id="saveTitle">确认</button>
            </div>
        </div>
    </div>
    
    <div class="modal confirm-modal" id="confirmModal">
        <div class="modal-content">
            <div class="modal-title" id="confirmMessage">确定要删除这个模块吗？</div>
            <div class="confirm-actions">
                <button class="cancel-btn" id="cancelConfirm">取消</button>
                <button class="save-btn" id="confirmAction">确定</button>
            </div>
        </div>
    </div>
    
    <script>
        const addLayerBtn = document.getElementById('addLayerBtn');
        const exportBtn = document.getElementById('exportBtn');
        const addLayerModal = document.getElementById('addLayerModal');
        const addModuleModal = document.getElementById('addModuleModal');
        const addItemModal = document.getElementById('addItemModal');
        const editTitleModal = document.getElementById('editTitleModal');
        const confirmModal = document.getElementById('confirmModal');
        const cancelAddLayer = document.getElementById('cancelAddLayer');
        const saveLayer = document.getElementById('saveLayer');
        const cancelAddModule = document.getElementById('cancelAddModule');
        const saveModule = document.getElementById('saveModule');
        const cancelAddItem = document.getElementById('cancelAddItem');
        const saveItem = document.getElementById('saveItem');
        const cancelEditTitle = document.getElementById('cancelEditTitle');
        const saveTitle = document.getElementById('saveTitle');
        const cancelConfirm = document.getElementById('cancelConfirm');
        const confirmAction = document.getElementById('confirmAction');
        const confirmMessage = document.getElementById('confirmMessage');
        const layerContainer = document.querySelector('.layer-container');
        const captureArea = document.getElementById('capture-area');
        const platformHeader = document.getElementById('platformHeader');
        const platformTitle = document.getElementById('platformTitle');
        const controlsContainer = document.getElementById('controlsContainer');
        
        let currentContext = null;
        let pendingAction = null;
        
        addLayerBtn.addEventListener('click', () => {
            addLayerModal.style.display = 'flex';
        });
        
        exportBtn.addEventListener('click', exportAsImage);
        
        cancelAddLayer.addEventListener('click', () => {
            addLayerModal.style.display = 'none';
        });
        
        saveLayer.addEventListener('click', addNewLayer);
        
        cancelAddModule.addEventListener('click', () => {
            addModuleModal.style.display = 'none';
        });
        
        saveModule.addEventListener('click', addNewModule);
        
        cancelAddItem.addEventListener('click', () => {
            addItemModal.style.display = 'none';
        });
        
        saveItem.addEventListener('click', addNewItem);
        
        cancelEditTitle.addEventListener('click', () => {
            editTitleModal.style.display = 'none';
        });
        
        saveTitle.addEventListener('click', () => {
            const newTitle = document.getElementById('newTitle').value;
            if (newTitle) {
                platformTitle.textContent = newTitle;
                editTitleModal.style.display = 'none';
            }
        });
        
        cancelConfirm.addEventListener('click', () => {
            confirmModal.style.display = 'none';
        });
        
        confirmAction.addEventListener('click', () => {
            if (pendingAction) {
                pendingAction();
            }
            confirmModal.style.display = 'none';
        });
        
        platformHeader.addEventListener('click', () => {
            document.getElementById('newTitle').value = platformTitle.textContent;
            editTitleModal.style.display = 'flex';
        });
        
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('add-new-module-btn')) {
                currentContext = e.target.closest('.modules');
                addModuleModal.style.display = 'flex';
            }
            
            if (e.target.classList.contains('add-item') || e.target.closest('.add-item')) {
                currentContext = e.target.closest('.module-group').querySelector('.module-items');
                addItemModal.style.display = 'flex';
            }
            
            if (e.target.classList.contains('remove-module') || e.target.closest('.remove-module')) {
                showConfirm('确定要删除这个模块吗？', () => {
                    e.target.closest('.module-group').remove();
                });
            }
            
            if (e.target.classList.contains('module-item-remove')) {
                e.target.closest('.module-item').remove();
            }
            
            if (e.target.classList.contains('add-module') || e.target.closest('.add-module')) {
                currentContext = e.target.closest('.layer').querySelector('.modules');
                addModuleModal.style.display = 'flex';
            }
            
            if (e.target.classList.contains('remove-layer') || e.target.closest('.remove-layer')) {
                showConfirm('确定要删除这一层吗？', () => {
                    e.target.closest('.layer').remove();
                });
            }
        });
        
        function showConfirm(message, action) {
            confirmMessage.textContent = message;
            pendingAction = action;
            confirmModal.style.display = 'flex';
        }
        
        function addNewLayer() {
            const layerName = document.getElementById('layerName').value;
            const layerType = document.getElementById('layerType').value;
            
            if (!layerName) {
                showConfirm('请输入层名称', null);
                return;
            }
            
            const layerClass = layerType === 'app' ? 'app-layer' : 
                             layerType === 'interface' ? 'interface-layer' : 'custom-layer';
            
            const newLayer = document.createElement('div');
            newLayer.className = `layer ${layerClass}`;
            newLayer.innerHTML = `
                <div class="layer-title-container">
                    <h2 class="layer-title">${layerName}</h2>
                </div>
                <div class="modules"></div>
                <div class="layer-actions">
                    <button class="layer-action add-module"><i class="fa-solid fa-plus"></i></button>
                    <button class="layer-action remove-layer"><i class="fa-solid fa-xmark"></i></button>
                </div>
            `;
            
            layerContainer.appendChild(newLayer);
            addLayerModal.style.display = 'none';
            document.getElementById('layerName').value = '';
        }
        
        function addNewModule() {
            const moduleName = document.getElementById('moduleName').value;
            
            if (!moduleName) {
                showConfirm('请输入模块名称', null);
                return;
            }
            
            const newModule = document.createElement('div');
            newModule.className = 'module-group';
            newModule.innerHTML = `
                <div class="module-header">
                    <h3 class="module-title">${moduleName}</h3>
                    <div class="module-actions">
                        <button class="module-action add-item">+项</button>
                        <button class="module-action remove-module">×</button>
                    </div>
                </div>
                <div class="module-items"></div>
            `;
            
            currentContext.appendChild(newModule);
            addModuleModal.style.display = 'none';
            document.getElementById('moduleName').value = '';
        }
        
        function addNewItem() {
            const itemName = document.getElementById('itemName').value;
            
            if (!itemName) {
                showConfirm('请输入项名称', null);
                return;
            }
            
            const newItem = document.createElement('div');
            newItem.className = 'module-item';
            newItem.innerHTML = `
                <span class="module-item-text">${itemName}</span>
                <span class="module-item-remove">×</span>
            `;
            
            currentContext.appendChild(newItem);
            addItemModal.style.display = 'none';
            document.getElementById('itemName').value = '';
        }
        
        function exportAsImage() {
            controlsContainer.classList.add('hidden');
            
            html2canvas(captureArea, {
                scale: 2,
                logging: false,
                useCORS: true,
                allowTaint: true
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = `${platformTitle.textContent}.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
                controlsContainer.classList.remove('hidden');
            });
        }
    </script>
</body>
</html>